<template>
    <view class="video-container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="menu-btn">
                <text class="iconfont icon-menu"></text>
            </view>
            <view class="tab-bar">
                <text class="tab-item" :class="{active: currentTab === 'chain'}">链链</text>
                <text class="tab-item" :class="{active: currentTab === 'live'}">直播</text>
                <text class="tab-item" :class="{active: currentTab === 'follow'}">关注</text>
                <text class="tab-item" :class="{active: currentTab === 'recommend'}">推荐</text>
            </view>
            <view class="search-btn">
                <text class="iconfont icon-search"></text>
            </view>
            <view class="camera-btn">
                <text class="iconfont icon-camera"></text>
            </view>
        </view>

        <!-- 视频内容区 -->
        <swiper class="video-swiper" vertical :current="currentVideo" @change="onSwiperChange">
            <swiper-item v-for="(item, index) in videoList" :key="index">
				<!-- 
				 <video 
				    id     						// 视频唯一标识，用于控制播放/暂停
				    src    						// 视频源地址
				    poster 						// 视频封面图
				    show-play-btn 				// 不显示默认的播放按钮
				    controls="false"          	// 不显示默认的控制栏
				    loop="true"               	// 视频循环播放
				    enable-progress-gesture		// 禁用手势控制进度
				    object-fit					// 视频的缩放模式，保持比例填充
				    @click="togglePlay(index)" 	// 点击视频时触发播放/暂停
				 ></video>
				 -->
                <video 
                    :id="'video-' + index" 
                    class="video-player"
                    :src="item.url"
                    :poster="item.cover"
                    :show-play-btn="false"
                    :controls="false"
                    :loop="true"
                    :enable-progress-gesture="false"
                    object-fit="contain"
                    @click="togglePlay(index)"
                ></video>
                
                <!-- 右侧操作栏 -->
                <view class="right-sidebar">
                    <!-- 头像 -->
                    <view class="avatar-wrap">
                        <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<!-- 关注 -->
                        <view class="follow-btn">+</view>
                    </view>
                    <!-- 喜欢 -->
                    <view class="action-item">
						<view>
							<image src="/static/images/like-unselected.png" mode="" class="video-icon" @click="likeVideo" v-if="!isLikeVideo"></image>
							<image src="/static/images/like-selected.png" mode="" class="video-icon" @click="likeVideo" v-else></image>
						</view>
                        <text class="count">{{item.likes}}</text>
                    </view>
                    <!-- 评论 -->
                    <view class="action-item">
                        <view>
							<image src="/static/images/comment-f.png" mode="" class="video-icon" @click="videoTocComment"></image>
						</view>
                        <text class="count">{{item.comments}}</text>
                    </view>
                    <!-- 分享 -->
                    <view class="action-item">
						<image src="/static/images/video-share.png" mode="" class="video-icon"></image>
						<text class="count">520</text>
                    </view>
                </view>

                <!-- 底部信息栏 -->
                <view class="bottom-info">
                    <view class="author">@{{item.author}}</view>
                    <view class="desc">{{item.desc}}</view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBarHeight: 0,
            currentTab: 'recommend',
            currentVideo: 0,
            videoList: [
                {
                    url: '/static/videos/001.mp4',
                    cover: 'https://img520.com/fxxRwb.png',
                    author: '测试',
                    avatar: '/static/images/default-avatar.png',
                    desc: '测试视频显示播放',
                    likes: '3272',
                    comments: '105',
                    price: '47.41'
                }
                // 可以添加更多视频数据
            ],
			isLikeVideo: false
        }
    },
    onLoad() {
        const systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = systemInfo.statusBarHeight
    },
    onShow() {
        // 每次显示页面时修改底部导航栏样式
        uni.setTabBarStyle({
            backgroundColor: '#000000',
            borderStyle: 'black',
            color: '#8a8a8a',
            selectedColor: '#eb4446'
        })
    },
    methods: {
        onSwiperChange(e) {
            const lastIndex = this.currentVideo
            this.currentVideo = e.detail.current
            // 暂停上一个视频
            const lastVideo = uni.createVideoContext('video-' + lastIndex)
            lastVideo.pause()
            // 播放当前视频
            const currentVideo = uni.createVideoContext('video-' + this.currentVideo)
            currentVideo.play()
        },
        togglePlay(index) {
            const video = uni.createVideoContext('video-' + index)
            video.play()
        },
		async likeVideo() {
			this.isLikeVideo = !this.isLikeVideo;
		},
		async videoToComment() {
			console.log("准备跳转评论区");
		}
    }
}
</script>

<style lang="scss">
.video-container {
    height: 100vh;
    background-color: #000;
    position: relative;
    
    .nav-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding-top: var(--status-bar-height);
        height: calc(var(--status-bar-height) + 88rpx);
        display: flex;
        align-items: center;
        padding-left: 20rpx;
        padding-right: 20rpx;
        color: #fff;
        
        .tab-bar {
            flex: 1;
            display: flex;
            justify-content: center;
            font-size: 32rpx;
            height: 88rpx;
            align-items: center;
			margin-top: 20rpx;
			margin-left: -20rpx;
            
            .tab-item {
                padding: 0 30rpx;
                position: relative;
                opacity: 0.8;
                
                &.active {
                    opacity: 1;
                    font-weight: bold;
                    
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -6rpx;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 30rpx;
                        height: 6rpx;
                        background: #fff;
                        border-radius: 3rpx;
                    }
                }
            }
        }
        
        .search-btn, .camera-btn {
            padding: 0 20rpx;
            font-size: 40rpx;
        }
    }
    
    .video-swiper {
        padding-top: calc(var(--status-bar-height) + 88rpx);
        height: 100vh;
        
        .video-player {
            width: 100%;
            height: 100vh;
        }
        
        .right-sidebar {
            position: absolute;
            right: 20rpx;
            bottom: 300rpx;
            z-index: 100;
            color: #fff;
            text-align: center;
            
            .avatar-wrap {
                margin-bottom: 25rpx;
                
                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }
                
                .follow-btn {
                    width: 40rpx;
                    height: 40rpx;
                    background: #ff4444;
                    border-radius: 50%;
                    line-height: 36rpx;
                    margin: 0 auto;
                }
            }
            
            .action-item {
                margin-bottom: 25rpx;
                
                .iconfont {
                    font-size: 60rpx;
                }
				
				.video-icon {
					width: 50%;
					height: 50rpx;
				}
                
                .count {
                    display: block;
                    font-size: 26rpx;
                    margin-top: 10rpx;
                }
            }
        }
        
        .bottom-info {
            position: absolute;
            left: 20rpx;
            bottom: 200rpx;
            right: 140rpx;
            z-index: 100;
            color: #fff;
            
            .author {
                font-size: 32rpx;
                margin-bottom: 10rpx;
            }
            
            .desc {
                font-size: 28rpx;
                opacity: 0.9;
            }
        }
    }
}
</style> 